<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人提示词节点大小调整测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f0f0;
        }

        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .test-node {
            width: 800px;
            height: 600px;
            border: 2px solid #333;
            border-radius: 8px;
            background: #2a2a2a;
            position: relative;
            resize: both;
            overflow: auto;
            min-width: 400px;
            min-height: 300px;
        }

        .node-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            color: #E0E0E0;
        }

        .toolbar {
            height: 60px;
            background: #333;
            border-bottom: 1px solid #555;
            display: flex;
            align-items: center;
            padding: 0 16px;
            flex-shrink: 0;
        }

        .main-area {
            flex: 1;
            display: flex;
            min-height: 0;
        }

        .character-editor {
            width: 300px;
            background: #333;
            border-right: 1px solid #555;
            flex-shrink: 0;
        }

        .mask-editor {
            flex: 1;
            background: #1a1a1a;
            position: relative;
        }

        .output-area {
            height: 120px;
            background: #333;
            border-top: 1px solid #555;
            flex-shrink: 0;
        }

        .size-info {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 1000;
        }

        .test-results {
            margin-top: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 4px;
        }

        .success {
            color: green;
            font-weight: bold;
        }

        .error {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>多人提示词节点大小调整测试</h1>

    <div class="test-container">
        <h2>测试说明</h2>
        <p>这个测试页面模拟了多人提示词节点的行为。请尝试以下操作：</p>
        <ol>
            <li>拖拽节点右下角调整节点大小</li>
            <li>观察节点是否能保持最小尺寸（800x600）</li>
            <li>观察自定义控件是否能适应节点大小变化</li>
            <li>检查各个区域的比例是否正确</li>
        </ol>
    </div>

    <div class="test-container">
        <h2>测试节点</h2>
        <div class="test-node" id="testNode">
            <div class="size-info" id="sizeInfo">800 x 600</div>
            <div class="node-content">
                <div class="toolbar">
                    <span>工具栏 (固定高度: 60px)</span>
                </div>
                <div class="main-area">
                    <div class="character-editor">
                        <span>角色编辑器 (固定宽度: 300px)</span>
                    </div>
                    <div class="mask-editor">
                        <span>蒙版编辑器 (自适应大小)</span>
                    </div>
                </div>
                <div class="output-area">
                    <span>输出区域 (固定高度: 120px)</span>
                </div>
            </div>
        </div>
    </div>

    <div class="test-results">
        <h3>测试结果</h3>
        <div id="testResults">
            <p>等待测试...</p>
        </div>
    </div>

    <script>
        const testNode = document.getElementById('testNode');
        const sizeInfo = document.getElementById('sizeInfo');
        const testResults = document.getElementById('testResults');

        let resizeObserver;
        let testResultsData = {
            minSizeTest: false,
            adaptiveLayoutTest: false,
            proportionalResizeTest: false
        };

        function updateSizeInfo() {
            const rect = testNode.getBoundingClientRect();
            const width = Math.round(rect.width);
            const height = Math.round(rect.height);
            sizeInfo.textContent = `${width} x ${height}`;

            // 测试最小尺寸限制
            if (width >= 800 && height >= 600) {
                testResultsData.minSizeTest = true;
            } else {
                testResultsData.minSizeTest = false;
            }

            // 测试自适应布局
            const toolbar = testNode.querySelector('.toolbar');
            const outputArea = testNode.querySelector('.output-area');
            const characterEditor = testNode.querySelector('.character-editor');
            const maskEditor = testNode.querySelector('.mask-editor');

            if (toolbar && outputArea && characterEditor && maskEditor) {
                const toolbarHeight = toolbar.offsetHeight;
                const outputAreaHeight = outputArea.offsetHeight;
                const characterEditorWidth = characterEditor.offsetWidth;
                const maskEditorWidth = maskEditor.offsetWidth;

                // 检查固定尺寸组件
                const toolbarCorrect = toolbarHeight === 60;
                const outputAreaCorrect = outputAreaHeight === 120;
                const characterEditorCorrect = characterEditorWidth === 300;

                // 检查自适应组件
                const expectedMaskEditorWidth = width - characterEditorWidth;
                const maskEditorCorrect = Math.abs(maskEditorWidth - expectedMaskEditorWidth) < 5;

                testResultsData.adaptiveLayoutTest = toolbarCorrect && outputAreaCorrect &&
                    characterEditorCorrect && maskEditorCorrect;
            }

            updateTestResults();
        }

        function updateTestResults() {
            let resultsHTML = '<h4>测试项目:</h4>';

            resultsHTML += `<p>最小尺寸限制 (800x600): ${testResultsData.minSizeTest ?
                '<span class="success">✓ 通过</span>' : '<span class="error">✗ 失败</span>'}</p>`;

            resultsHTML += `<p>自适应布局: ${testResultsData.adaptiveLayoutTest ?
                '<span class="success">✓ 通过</span>' : '<span class="error">✗ 失败</span>'}</p>`;

            const allTestsPassed = testResultsData.minSizeTest && testResultsData.adaptiveLayoutTest;

            resultsHTML += `<h4>总体结果: ${allTestsPassed ?
                '<span class="success">所有测试通过</span>' : '<span class="error">部分测试失败</span>'}</h4>`;

            testResults.innerHTML = resultsHTML;
        }

        // 初始化
        function initTest() {
            // 创建ResizeObserver来监听大小变化
            resizeObserver = new ResizeObserver(entries => {
                for (let entry of entries) {
                    updateSizeInfo();
                }
            });

            resizeObserver.observe(testNode);

            // 初始更新
            updateSizeInfo();

            // 设置最小尺寸
            testNode.style.minWidth = '800px';
            testNode.style.minHeight = '600px';
        }

        // 页面加载完成后初始化
        window.addEventListener('load', initTest);

        // 清理
        window.addEventListener('beforeunload', () => {
            if (resizeObserver) {
                resizeObserver.disconnect();
            }
        });
    </script>
</body>

</html>